<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="../static/webupload/webuploader.css"/>
    <link rel="stylesheet" type="text/css" href="../static/webupload/style.css"/>
    <style>
        .adpuploader .progress {
            border: 1px solid #1483d8;
            width: 198px;
            background: #fff;
            height: 10px;
            position: relative;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            color: #6dbfff;
            position: relative;
            margin-right: 10px;
        }

        .adpuploader .progress span.percentage {
            width: 0;
            height: 100%;
            left: 0;
            top: 0;
            background: #1483d8;
            position: absolute;
        }



    </style>
</head>
<body>
<!--<div id="uploader" class="wu-example">-->
    <!--&lt;!&ndash;用来存放文件信息&ndash;&gt;-->
    <!--<div id="thelist" class="uploader-list"></div>-->
    <!--<div class="btns">-->
        <!--<div id="picker">选择文件</div>-->
        <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>-->
    <!--</div>-->
<!--</div>-->




<div id="uploader2">upload</div>

<div>==============</div>
<div id="uploader3"></div>
<div id="uploader4"></div>


<div id="log">
</div>



<script type="text/javascript" src="../static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../static/webupload/webuploader.js"></script>
<a href="javascript:;"></a>
</body>
</html>
<script type="text/javascript">


    $.fn.preview = function(){
        var xOffset = 10;
        var yOffset = 20;
        var w = $(window).width();
        $(this).each(function(){
            $(this).hover(function(e){
                if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href").split(";")[0])){
                    $("body").append("<div id='preview'><div><img src='"+$(this).data('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
                }else{
                    $("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>");
                }
                $("#preview").css({
                    position:"absolute",
                    padding:"4px",
                    border:"1px solid #f3f3f3",
                    backgroundColor:"#eeeeee",
                    top:(e.pageY - yOffset) + "px",
                    zIndex:1000
                });
                $("#preview > div").css({
                    padding:"5px",
                    backgroundColor:"white",
                    border:"1px solid #cccccc"
                });
                $("#preview > div > p").css({
                    textAlign:"center",
                    fontSize:"12px",
                    padding:"8px 0 3px",
                    margin:"0"
                });
                if(e.pageX < w/2){
                    $("#preview").css({
                        left: e.pageX + xOffset + "px",
                        right: "auto"
                    }).fadeIn("fast");
                }else{
                    $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");
                }
            },function(){
                $("#preview").remove();
            }).mousemove(function(e){
                $("#preview").css("top",(e.pageY - xOffset) + "px")
                if(e.pageX < w/2){
                    $("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
                }else{
                    $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
                }
            });
        });
        return this;
    };


    function log(msg) {
        $("#log").append("<div>"+msg+"</div>");
    }
    WebUploader.Uploader.register({
        'before-send-file': 'beforeSendFile'
    }, {
        beforeSendFile: function( file ) {
            var ldot = file.name.lastIndexOf(".");
            var type = file.name.substring(ldot + 1);
            file.name=WebUploader.Base.guid()+"."+type;

        }
    });

    $.fn.extend({
        adpUploader:function (options) {
            if ( this.hasClass("adpuploader") ){
                return this;
            }

            var $box=this.addClass("adpuploader") ;
            var pickid=WebUploader.Base.guid();
            var defaults = {
                formName:"file",
                pick:{id:'#'+pickid,multiple :false}
            };
            var opts = $.extend({}, defaults, options);
            var thumbnailWidth = 100 ,
                thumbnailHeight = 100 ;


            var $uploadBtn=$(' <div  style="padding-top: 10px;" id="'+pickid+'" >选择文件</div>');
            var $preview=$('<a target="_blank" class="preview" href="#" title="预览"><img/></a>').preview();
            var $hidden=$('<input type="hidden" name="'+opts.formName+'">');
            var $percentage=$('<span class="percentage" style="width: 0%;"></span>');
            var $progress=$('<div class="progress"></div>').append($percentage);


            $box.append($uploadBtn).append($hidden);
            var uploader = WebUploader.create({

                // 自动上传。
                auto: true,

                // swf文件路径
                swf: "http://localhost:8080/adptest/static" + '/js/webupload/Uploader.swf',

                // 文件接收服务端。
                server: 'http://localhost:8080/adptest/rs/Login/upload/upload',
                formData:{formName:opts.formName},

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: opts.pick,
                chunked: true,
//                chunkSize: 5*1024*1024,
                chunkSize: 100*1024,
                // 只允许选择文件，可选。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
//                mimeTypes: 'image/*' //chrome弹框速度慢
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                }
            });



            uploader.on('fileQueued', function (file) {
                $box.find('.preview').remove();
                $uploadBtn.hide();
                // 创建缩略图
                uploader.makeThumb( file, function( error, src ) {
                    $preview.attr("title",file.name);
                    var $img=$preview.find("img");
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
            uploader.on('uploadProgress', function (file, percentage) {



                var percent = $box.find('.progress span');

                // 避免重复创建
                if ( !percent.length ) {
                    $box.prepend($progress);
                }

                $percentage.css('width', percentage * 100 + '%');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $box.find('.progress').remove();
                $uploadBtn.show();
            });

            uploader.on( 'uploadSuccess', function( file,response ) {
                $preview.attr("href","http://localhost:8080/adptest/preview.jsp?id="+response.id);
                $preview.data("href","http://localhost:8080/adptest/rs/Login/image/"+response.id+";width=300;height=300");
                $box.prepend($preview);
                $hidden.val(response.id);
            });
            return $box;

        }
    });

    $("#uploader3").adpUploader({formName:"hello"});
    $("#uploader4").adpUploader({});




</script>